<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车列表</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      .list {
        overflow: hidden;
        display: flex;
        justify-content: center;
        /* align-items: center; */
      }
      .list > li {
        float: left;
        margin: 10px;
        padding: 10px;
        width: 220px;
        border: 1px solid #cecece;
      }
      .list img {
        width: 220px;
        height: 200px;
        cursor: pointer;
      }
      .list p:nth-of-type(1) {
        margin: 10px 0;
        font-weight: bold;
      }
      .list p:nth-of-type(2) {
        margin: 10px 0;
        color: red;
      }
      .list .btn {
        width: 100%;
        height: 40px;
        border: none;
        background-color: red;
        color: white;
        cursor: pointer; /* 鼠标变小手 */
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <!-- <li>
        <img src="./img/cream.jpg" />
        <p>索尼相机</p>
        <p>￥:399</p>
        <input type="button" value="加入购物车" data-id="" />
      </li> -->
    </ul>
  </body>
  <script>
    CreateHtml();
    function CreateHtml() {
      let List = document.querySelector("ul");
      let html = "";
      let Datas = JSON.parse(localStorage.getItem("Datas"));
      //   console.log(Datas);
      Datas.forEach((item) => {
        html += `<li>
        <img src="${item.img}" />
        <p>${item.name}</p>
        <p>￥:${item.price}</p>
        <input type="button" value="加入购物车" class="btn" data-id="${item.id}" />
      </li>`;
      });
      List.innerHTML = html;
    }
    if (localStorage.getItem("Datas")) {
      var index_number = JSON.parse(localStorage.getItem("Datas"));
    } else {
      var index_number = {};
    }
    let oBtn = document.querySelectorAll(".btn");
    oBtn.forEach((item, index) => {
      if()
    });
    let Img = document.querySelectorAll("img");
    Img.forEach((i) => {
      i.onclick = function () {
        location.href = "detial.html";
      };
    });
  </script>
</html>
